<template>
  <div>
    <input type="range" v-model="zhi" :max="prop.max" :min="prop.min"
           :title="zhi"
           @change="change" @input="change" class="w-40 h-9">
  </div>
</template>

<script setup>
import { ref,defineProps,defineEmits} from "vue"
const zhi = ref(0)
const prop = defineProps({
  value:{
    default:0,
    type:Number,
  },
  max:{
    default:100,
    type:Number,
  },
  min:{
    default:0,
    type:Number,
  },
})
const emit = defineEmits(["update:modelValue"])
const change = (e)=>{
  console.log("slider的值变了",e.target.value)
  zhi.value = e.target.value
  emit("update:modelValue",e.target.value)
}
</script>

<style scoped>

</style>